<template>
  <div class="myintegral-body">
    <custom title="我的积分" bg-color="linear-gradient(90deg, #EF4214 1%, #FF8213 100%)" color="#fff" />
    <div class="myintegral-header">
      <div class="num">{{ myintegral.currentScore }}</div>
      <div class="mynum">当前我的积分</div>
    </div>
    <div class="main">
      <div class="left">
        <div>积分获取</div>
        <div class="add">+{{ myintegral.getTotalScore }}</div>
      </div>
      <div class="middle"></div>
      <div class="right">
        <div>积分支出</div>
        <div class="reduce">-{{ myintegral.expenseTotalScore }}</div>
      </div>
    </div>
    <div class="cut-off"></div>
    <div v-for="(i, ind) in items" :key="ind" class="myintegral-item">
      <div class="myintegral-card">
        <img v-if="i.type === 1" class="myintegral-img" src="@/assets/usercardbill/topup2x.png" alt="" />
        <img v-if="i.type === 2" class="myintegral-img" src="@/assets/usercardbill/slices2x.png" alt="" />
        <img v-if="i.type === 3" class="myintegral-img" src="@/assets/usercardbill/consumption2x.png" alt="" />
        <div class="myintegral-content">
          <div class="">
            <div v-if="i.type === 3" class="myintegral-content-title">
              <span class="title-header">{{ i.name }}</span>
              <span class="title-price-negative">{{ i.score }}</span>
            </div>
            <div v-else class="myintegral-content-title">
              <span class="title-header">{{ i.name }}</span>
              <span class="title-price-is">{{ i.score }}</span>
            </div>
          </div>
          <div class="myintegral-title-totalPrice">
            <span>{{ i.orderTime }} </span><span>余额：{{ i.currentScore }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 分页  退款
import custom from '@/components/custom.vue'
import { commonAjax } from 'Ajax'
export default {
  name: 'Myintegral',
  components: { custom },

  data() {
    return {
      items: [
        { type: 2, name: '充值700元', score: '+70分', currentScore: '1140分', orderTime: '09-06  06:16:16' },
        { type: 2, name: '充值700元', score: '+70分', currentScore: '1070分', orderTime: '09-06  06:16:16' },
        { type: 1, name: '支付700元', score: '+70分', currentScore: '1000分', orderTime: '09-06  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '9300分', orderTime: '08-05  06:16:16' },
        { type: 3, name: '消耗1000积分', score: '-1000分', currentScore: '8300分', orderTime: '08-05  06:16:16' }
      ],
      myintegral: {
        currentScore: '0', // 当前积分
        expenseTotalScore: '0', // 支出的总积分
        getTotalScore: '0' // 获取的总积分
      },
      pageInfo: {
        currPage: 1,
        pageSize: 10,
        totalPage: 1
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const params = {
        'exportExcel': false,
        'pageNum': this.myintegral.currPage,
        'pageSize': this.myintegral.pageSize,
        'sortField': '',
        'sortOrder': 'asc'
      }
      commonAjax.scoreList(params).then(res => {
        this.myintegral = {
          currentScore: res.currentScore,
          expenseTotalScore: res.expenseTotalScore,
          getTotalScore: res.getTotalScore
        }
        this.pageInfo.totalPage = res.totalPage
        this.items = res.list
      })
    }
  }
}
</script>

<style scoped lang="less">
.myintegral-body {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  // .gradient {
  //   background: linear-gradient(90deg, #ef4214 1%, #ff8213 100%);
  // }
  .myintegral-header {
    height: 280px;
    background: url(../../assets/usercardbill/integral.png) no-repeat;
    background-size: cover;
    .num {
      font-size: 80px;
      font-family: DIN Alternate;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      // margin-top: 48px;
      height: 126px;
      line-height: 153px;
    }
    .mynum {
      width: 172px;
      line-height: 50px;
      height: 50px;
      border: 1px solid #ffffff;
      border-radius: 25px;
      text-align: center;
      margin: 0 auto;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .main {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    height: 160px;
    font-size: 28px;
    .middle {
      width: 4px;
      height: 40px;
      background: #eaeaea;
      margin: 60px 0;
    }
    .left,
    .right {
      text-align: center;
      margin-top: 34px;
    }
    .add,
    .reduce {
      margin-top: 23px;
    }
    .cut-off {
      height: 10px;
      background: #f8f8f8;
    }
  }
  .myintegral-title-date {
    height: 100px;
    // background: #f2f2f2;
    font-size: 30px;
    font-weight: 400;
    line-height: 100px;
    padding-left: 28px;
  }
  .myintegral-item {
    height: 159px;
    border-bottom: 1px solid #f8f8f8;
    .myintegral-card {
      position: relative;
      box-sizing: border-box;
      color: #323233;
      font-size: 3.2vw;
      // background-color: #fafafa;
      padding: 0;
      height: 159px;
      display: flex;
      .myintegral-img {
        position: relative;
        display: block;
        width: 100px;
        height: 100px;
        margin: 30px;
      }
      .myintegral-content {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        .myintegral-content-title,
        .myintegral-title-totalPrice {
          display: flex;
          justify-content: space-between;
          margin-right: 30px;
          .title-price-negative,
          .title-price-is {
            font-size: 36px;
          }
          .title-price-is {
            color: #f35517;
          }
        }
        .myintegral-content-title {
          height: 98px;
          line-height: 106px;
          .title-header {
            font-size: 28px;
          }
        }
        .myintegral-title-totalPrice {
          color: #a1a1a1;
        }
      }
    }
  }
}
</style>
